<template>
  <div class="we_video_editor">
    <el-form label-width="60px" style="padding: 15px;">
      <el-form-item label="视频源">
        <el-input v-model="data.url">
          <el-button slot="append" @click="dialog=true">素材库</el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 选择视频 -->
    <el-dialog ref="dialog" title="选择视频" :visible.sync="dialog" @open="SELECT_SOURCE({})">
      <dialog-video></dialog-video>
      <div slot="footer">
        <el-button type="primary" @click="handleSelect">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapMutations} from 'vuex'
  import dialogVideo from '@/components/common/content/dialogVideo'
  export default {
    props: ['data'],
    components: {dialogVideo},
    data () {
      return {
        dialog: false
      }
    },
    computed: {
      ...mapState({
        selected: state => state.sourceManage.selected
      })
    },
    methods: {
      ...mapMutations(['SELECT_SOURCE']),
      handleSelect () {
        this.data.url = this.selected.url
        this.data.cover = this.selected.cover
        this.dialog = false
      }
    }
  }
</script>
<style lang="scss">
  .we_video_editor{
    .el-dialog{width: 900px;}
  }
</style>
